<template>
	<div>
		<div class="row mb-60" style="padding: 0 10px">
			<div class="col-lg-12">
				<form>
					<div style="padding: 10px 0px" v-html="detailData.colContent" class="art-body"></div>
				</form>
			</div>
		</div>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb'
import { getCodeById } from '@/utils/routeUtils.js'
export default {
	components: {
		breadcrumb,
	},
	data() {
		return {
			query: {},
			detailData: {},
		}
	},
	created() {
		this.query = this.$route.query
		let colId = this.query.colId
		const nav = getCodeById(this.$store.getters.levelMenus, colId)
		console.log('getCode', this.$store.getters.levelMenus, nav, colId)
		this.getGroupInfo(nav.colCode)
	},
	methods: {
		getGroupInfo(code) {
			this.$api.group.getGroupInfoByCode(code).then((res) => {
				const data = res.data
				if (data.code == 200) {
					this.detailData = data.data
				}
			})
		},
	},
}
</script>

<style lang="scss" scoped>
@media (max-width: 576px) {
	span {
		font-size: 16px !important;
	}
}
/*http://yyzjjt.yvtc.edu.cn/templates/main/images/nyban.jpg*/
.bg-1 {
	background: rgba(0, 0, 0, 0) url('~@/assets/images/bg/nyban.jpg') repeat scroll center center / cover;
	height: 400px;
}

.list-none {
	text-align: right;
}

.border-b {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
	/*border-bottom: 2px solid #529e2f;*/
	border-bottom: 2px solid $mainColor;

	span {
		font-size: 24px;
		/*border-left: 8px solid #529e2f;*/
		border-left: 8px solid $mainColor;
		padding-left: 10px;
	}
}

.art-tit {
	margin-top: 20px;
}

.art-info {
	color: #333;
	font-size: 16px;
	font-family: '微软雅黑';
	padding: 0;
	box-sizing: border-box;
	outline: none;
	background: #fff;
	text-align: center;
	margin: 40px 0;
}

h3 {
	text-align: center;
}
</style>
